<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags" %>

<c:url value="/player/new.html" var="createPlayer"/>
<c:url value="/resources/jQuery/jquery-1.7.2.min.js" var="jquery"/>
<c:url value="/resources/jQuery/jquery-ui-1.8.21.custom.min.js" var="jqueryUI"/>
<c:url value="/resources/css/cupertino/jquery-ui-1.8.21.custom.css" var="jQueryCSS" />


<script type="text/javascript" src="${jquery}" ></script>
<script type="text/javascript" src="${jqueryUI}" ></script>
<link type="text/css" href="${jQueryCSS}" rel="Stylesheet" />

<script type="text/javascript">
	 $(document).ready(function(){
		 $( "#tabs" ).tabs({
			 event: "click",
			 collapsible: "false"
		 });
		 $("#tabs").show();
		 
		 $("#createGameButton").button();
		 $("#createGameButton").click(function() {
			$("#createGameForm").dialog({
		            title: "Create a Game",                
			            width: "auto",
			            height: "auto",
			            modal: true,
			            resizable: false
					});
			return false;
		 });
		 
		 $("#createPlayerButton").button();
		 $("#createPlayerButton").click(function() {
			$("#createPlayerForm").dialog({
		            title: "Create a Player",                
			            width: "auto",
			            height: "auto",
			            modal: true,
			            resizable: false
					});
			return false;
		 });
	 });
</script>

<style>
body {
  background-color: #B6BCFA;
}

table {
  border-style: solid;
  border-width: 2px;
  border-color: #B6BCFA;
  width: 95%;
}

table td {
  text-align: center;
}

tr {
  padding: 0px;
  height: 20px;
}


tr.odd {
  background-color: #B6BCFA;
}

tr.odd td {
  padding:0;
}
</style>


<html>
  <body>
   <jsp:include page="templates/header.jsp"></jsp:include>
    <h4 style="margin-top: 0px;">Team page for ${team.team.name}</h4>
    <p>Coach: <a href="../contact/view.html?id=${team.coach.contactID}">${team.coach.fullName }</a> </p>
    
    <div id="tabs" style="display:none">
      <ul>
		<li><a href="#tabs-1">Players</a></li>
	  </ul>
	  <div id="tabs-1">
	  <table>
        <tbody>
        <tr><th>Player Name</th><th>Age</th><th>Position</th></tr>
        <c:forEach items="${players}" var="player" varStatus="loop">
	      <c:choose>
	      <c:when test="${loop.index % 2 eq 0}">
	      <tr class="odd">
	      </c:when>
	      <c:otherwise>
	      <tr>
	      </c:otherwise>
	      </c:choose>
	      <td>${player.contact.firstName} ${player.contact.lastName}</td><td>${player.player.age}</td><td>${player.player.position}</td></tr>
        </c:forEach>
        </tbody>
      </table>
    <sec:authorize access="hasAnyRole('Coach','Admin')">
    <br />
     <div id="createPlayerButton" >Add a Player</div>
      <jsp:include page="forms/createPlayer.jsp"></jsp:include>
    </sec:authorize>
	  </div>
    </div>
  </body>
</html>